<script setup lang="ts">

import {ref} from "vue";
import {getDateTimes} from "@/api/home/index";


// 要传递的时间与日期
let deliverObj = ref({
    date: '',
    startTime: '',
    endTime: ''
})


let dataArr = ref([])
let tiemArr = ref([])
let data = new Date()
let week = data.getDay();

// getTimeAnt().then(res => {
//     if (res.code == 200) {
//         res.rows.forEach((row, index) => {
//             row.usable = index == 0 ? true : false;
//         });
//         tiemArr.value = res.rows
//     }
// })
// 获取日期和时间的接口
getDateTimes().then(res => {
    let currentDate = new Date();
    res.data.forEach((val, index) => {
        const dayOfWeek = currentDate.getDay();
        const weekDay = ['日', '一', '二', '三', '四', '五', '六'][dayOfWeek];

        dataArr.value.push({
            id: index,
            date: val.date,
            weekDay: dayOfWeek == week ? '今天' : "周" + weekDay,
            // 判断是否选中日期
            clickData: dayOfWeek == week ? true : false,
            timePeriod: val.timeSpanList
        })

        currentDate.setDate(currentDate.getDate() + 1);
    })

    dataArr.value.forEach(res=>{
        if (res.clickData) {
            deliverObj.value.date = res.date
            res.timePeriod.forEach((val, index)=>{
                if (val.usable) {
                    val.usable = index == 0 ? true : false
                    tiemArr.value.push(val)
                    deliverObj.value.startTime = val.startTime
                    deliverObj.value.endTime = val.endTime
                }
            })
        }
    })
})


// 手写获取时间与星期
// function getDatesAndWeeks(daysToAdd) {
//     const datesAndWeeks = [];
//     let currentDate = new Date();
//
//     for (let i = 0; i <= daysToAdd; i++) {
//         // 获取当前日期的年月日
//         const day = currentDate.getDate();
//
//         // 获取当前日期是星期几（0代表周日，1代表周一，依此类推）
//         const dayOfWeek = currentDate.getDay();
//         const weekDay = ['日', '一', '二', '三', '四', '五', '六'][dayOfWeek];
//
//         // 格式化日期
//         const formattedDate = {
//             id: day < 10 ? '0' + day : day,
//             weekDay: dayOfWeek == week ? '今天' : "周" + weekDay,
//             // 判断是否选中日期
//             clickData: dayOfWeek == week ? true : false
//         };
//
//         datesAndWeeks.push(formattedDate);
//
//         // 增加一天
//         currentDate.setDate(currentDate.getDate() + 1);
//     }
//
//     return datesAndWeeks;
// }

// 获取今天以及接下来六天的日期和星期
// const dates = getDatesAndWeeks(6);

// dataArr.value = dates



// 判断是否选中日期
function clickDataF(item) {
    dataArr.value.forEach(res => {
        res.clickData = false
    })
    item.clickData = !item.clickData
    deliverObj.value.date = item.date
}

function clickTiem(item) {
    tiemArr.value.forEach(res => {
        res.usable = false
    })
    item.usable = !item.usable
    deliverObj.value.startTime = item.startTime
    deliverObj.value.endTime = item.endTime
    // 将数据传到父组件中
    emit("getTime", deliverObj.value)
}
// 将数据传到父组件中
const emit = defineEmits(["getTime"]);
emit("getTime", deliverObj.value)


// 正在加载
const loading = ref(true)

const tableData = [
    {
        date: '2016-05-02',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
        date: '2016-05-04',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
        date: '2016-05-01',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
]

</script>

<template>
    <div class="box">
        <div class="titTime">
            <img src="@/assets/images/日历.png" alt="" class="titImg">
            <span>选取日期</span>
        </div>
        <div class="dateBox" v-if="dataArr != ''">
            <div class="dataBox" @click="clickDataF(item)" v-for="item in dataArr" :key="item.id"
                 :id="item.clickData ? 'selected' : ''">
                <div class="week">
                    {{ item.weekDay }}
                </div>
                <div class="data">
                    {{ item.date.substring(8, 12) }}
                </div>
            </div>
        </div>
        <div class="load" v-else>
            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column prop="address" label="Address" />
            </el-table>
        </div>
    </div>
  <!--  选取时间段-->
    <div class="box">
        <div class="titTime">
            <img src="@/assets/images/时间.png" alt="" class="titImg">
            <span>选取时间段</span>
        </div>
        <div class="timeBox" v-if="tiemArr != ''">
            <div class="dataBox" @click="clickTiem(item)" v-for="item in tiemArr" :key="item.id"
                 :id="item.usable ? 'selected' : ''">
                <div class="time">
                    {{ item.startTime.substring(0, 5) }}——{{ item.endTime.substring(0, 5) }}
<!--                    {{ item.startTime }}——{{ item.endTime }}-->
                </div>
            </div>
        </div>
        <div class="load" v-else>
            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column prop="address" label="Address" />
            </el-table>
        </div>
    </div>
</template>

<style scoped>
.titTime {
    .titImg {
        margin-right: 2%;
        width: 7%;
        height: 7%;
        vertical-align: bottom;
    }
}

.timeBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 3%;
    width: 100%;
    height: 100%;
    overflow: auto;

    .dataBox {
        margin-right: 10px; /* 子元素之间的间距 */
        padding: 6% 0;
        margin-bottom: 5%;
        width: 46%;
        height: 15vw;
        background-color: #fff;
        text-align: center;
        border-radius: 10px;
        font-size: 4vw;
    }
}

#selected {
    color: #fff;
    background-color: #1892FF;
}

.bad {
    background-color: #D5D5D5;
}

.titTime {
    .titImg {
        margin-right: 2%;
        width: 7%;
        height: 7%;
        vertical-align: bottom;
    }
}

.dateBox {
    display: flex;
    justify-content: space-between;
    margin-top: 3%;
    margin-bottom: 5%;
    width: 100%;
    height: 100%;
    overflow: auto;
    min-height: 18vw;

    .dataBox {
        flex: 0 0 auto; /* 不伸缩，保持原始大小 */
        margin-right: 10px; /* 子元素之间的间距 */
        padding: 3% 0;
        width: 14%;
        height: 15vw;
        background-color: #fff;
        text-align: center;
        border-radius: 15%;
        font-size: 4vw;

        .week {
            margin-bottom: 15%;
        }
    }
}

#selected {
    color: #fff;
    background-color: #1892FF;
}

.bad {
    background-color: #D5D5D5;
}
</style>